<script setup lang="ts">
import UvVtabs from '@/uv-ui/components/uv-vtabs/components/uv-vtabs/uv-vtabs.vue'
import UvVtabsItem from '@/uv-ui/components/uv-vtabs/components/uv-vtabs-item/uv-vtabs-item.vue'

function handleClickLeft() {
  uni.navigateBack()
}

const list = [
  {
    name: '大厅',
    childrens: [
      {
        name: 'uv-ui简介',
        desc: '1. uv-ui最初是在uview2.x的基础上进行改进优化，支持vue3等优化，最重要的是支持单独导入直接使用，无需在main.js中进行配置。\n\n2. uv-ui来源于社区，也回归到社区，正是有一群热爱uni-app生态的同学推着它前行，而我们也一如既往的承诺，uv-ui永久开源，永远免费。但是会在下载处进行广告配置，作为开发团队的研发费用的部分来源，所以希望大家理解。',
      },
    ],
  },
  {
    name: '包间',
  },
]
const value = ref(0)
function toAdd() {
  uni.navigateTo({
    url: '/pages/canteenTable/canteenTableAdd',
  })
}
function toArea() {
  uni.navigateTo({
    url: '/pages/canteenTable/canteenTableArea',
  })
}
function change(index) {
  value.value = index
}
</script>

<template>
  <view class="h-full flex flex-col overflow-hidden">
    <wd-navbar title="桌台管理" left-text="返回" left-arrow @click-left="handleClickLeft" />
    <view class="flex-1 overflow-hidden">
      <uv-vtabs :chain="false" :list="list" @change="change">
        <uv-vtabs-item>
          <view class="flex items-center justify-between p-[10px]">
            <wd-text text="大厅" size="14px" />
            <view>
              <wd-button type="text" size="small">排序</wd-button>
            </view>
          </view>
          <wd-cell-group border class="mt-4">
            <wd-cell is-link>
              <template #title>
                <wd-text text="1" size="14px" color="#333" />
                <wd-text text="6人" size="14px" class="ml-8" />
              </template>
            </wd-cell>
            <wd-cell is-link>
              <template #title>
                <wd-text text="2" size="14px" color="#333" />
                <wd-text text="6人" size="14px" class="ml-8" />
              </template>
            </wd-cell>
          </wd-cell-group>
        </uv-vtabs-item>
      </uv-vtabs>
    </view>
    <view class="relative">
      <wd-tabbar>
        <wd-tabbar-item title="区域管理" name="area" @click="toArea">
          <template #icon>
            <view class="i-carbon-list" />
          </template>
        </wd-tabbar-item>
        <wd-tabbar-item title="新增桌台" name="add" @click="toAdd">
          <template #icon>
            <view class="i-carbon-add" />
          </template>
        </wd-tabbar-item>
        <wd-tabbar-item title="批量修改">
          <template #icon>
            <view class="i-carbon-edit" />
          </template>
        </wd-tabbar-item>
      </wd-tabbar>
      <view
        class="absolute left-1/2 top-[-20px] z-[100] h-[36px] w-[36px] rounded-full bg-white p-[5px] -translate-x-1/2"
        @click="toAdd"
      >
        <view class="h-full w-full flex items-center justify-center rounded-full bg-primary">
          <view class="i-carbon-add-large text-white font-bold" />
        </view>
      </view>
    </view>
  </view>
</template>

<style scoped lang="scss"></style>
